<template>
  <div>
    <MglMarker
      v-for="item in markersArr"
      :coordinates="[item.lng,item.lat]"
      :key="item.deviceinformationid"
      :ref="item.deviceinformationid"
    >
      <div slot="marker">
        <!-- :style="{color:item.iconColor}" -->
        <!-- :class="item.status==0?'dot-normal':'dot-abnormal'" -->
        <span class="dot-abnormal">
          <i
            class="iconfont"
            :class="item.iconclass"
            @mouseenter="markerEntered(item)"
            @mouseleave="markerLeaved(item)"
            @click="markerClick(item)"
            style="z-index:999"
          ></i>
        </span>
        <!-- <div>{{item.devicename}}</div> -->
      </div>
    </MglMarker>

    <!--marker-popup-->
    <div v-if="popCoors.length>0">
      <MglMarker :coordinates="popCoors">
        <div slot="marker" class="marker-pop">
          <div>{{popText}}</div>
        </div>
      </MglMarker>
    </div>

    <!--marker-alert-->
    <div v-if="alertCoors.length>0">
      <MglMarker :coordinates="alertCoors">
        <div slot="marker" class="marker-alert">
          <div>此处发生火灾</div>
        </div>
      </MglMarker>
    </div>

    <!-- <div class="textpop" v-show="popShow" v-bind:style="{top:popY+'px',left:popX+'px'}">
      <div>{{describe}}</div>
    </div>-->
  </div>
</template>
   
<script>
import { MglMarker, MglPopup } from 'vue-mapbox';
import "@/assets/iconfont/iconfont.css";
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      markersArr: [],
      //自定义pop
      popShow: false,
      popX: 0,
      popY: 0,
      describe: '',
      //marker-pop
      popCoors: [],
      popText: [],
      //marker-alert
      alertCoors: [],
    }
  },
  computed: {
    ...mapGetters(['points'])
  },
  created() {

  },
  watch: {
    points: function (val) {
      if (val.length == 0) {
        this.alertCoors = []
      }
      this.markersArr = this.points
      for (let i of this.markersArr) {
        i.lng = i.gis.split(',')[0]
        i.lat = i.gis.split(',')[1]
        i.iconclass = this.convIconClass(i.devicetype)
      }
    }
  },
  components: {
    MglMarker,
    MglPopup
  },
  methods: {
    markerEntered(item) {
      this.popText = item['devicename'];
      this.popCoors = [item.lng, item.lat]
      // let sp = item.iconColor
      // let xx = sp.substring(13, 16);
      // item.iconColor = sp.replace(xx, '1.0');
      // let mapMarker = this.$refs[item.deviceinformationid][0].marker
      // this.popY = mapMarker._pos.y - 35;
      // this.popX = mapMarker._pos.x + 10;
    },
    markerLeaved(item) {
      this.popCoors = []
    },
    markerClick(item) {
      this.popCoors = []
      this.alertCoors = [item.lng, item.lat]
    },
    convIconClass(devicetype) {
      let ret = 'icon-marker'
      switch (devicetype) {
        case 'BC004001':
          ret = 'iconhuanbao'
          break
        case 'BC004005':
          ret = 'icondianziweilan'
          break
        case 'BC004002':
          ret = 'iconhuozai'
          break
        // case 'BC004001':
        //   ret = 'iconmenjin'
        //   break
        case 'BC004004':
          ret = 'iconshipinjiankong'
          break
        default:
          break
      }
      return ret
    }
  }
} 
</script>

<style scoped lang="scss">
$normal-color: #666;
$abnormal-color: #e61919;
.dot-normal {
  position: relative;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: $normal-color;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dot-abnormal {
  position: relative;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: $abnormal-color;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: wave 2s ease-out infinite;
  }

  &:nth-child(1) {
    &::before {
      animation-delay: 0.2s;
    }
  }
}

@keyframes wave {
  50%,
  75% {
    transform: scale(2.5);
  }

  80%,
  100% {
    opacity: 0;
  }
}

.marker-pop {
  background-color: rgba(0, 0, 0, 0.66);
  color: #f6f6f6;
  font-size: 12px;
  text-align: center;
  width: 100px;
  border-radius: 6px;
  padding: 10px 5px;
  margin-top: -45px;
}

.marker-alert {
  background-color: rgba(0, 0, 0, 0.66);
  color: #f6f6f6;
  font-size: 12px;
  text-align: center;
  width: 120px;
  border-radius: 6px;
  padding: 10px 5px;
  position: relative;
  top: -66px;
  right: -76px;
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 5px;
    width: 21px;
    height: 18px;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-right-width: 12px;
    border-right-color: currentColor;
    border-radius: 0 0 42px 0;
    color: rgba(0, 0, 0, 0.6);
  }
}
</style>